<template>
  <div class="xiaozujianbigbox">
    <div class="xiaozujian">
      <!-- 引导 -->
      <div class="threetwo">
        <div class="yindao">
          <div class="first-lab">
            <span>引导</span><span><el-icon :size="25">
                <ElemeFilled />
              </el-icon></span>
          </div>
          <div class="first-options">
            <div @click="yindaoboxshow = true">
              <el-icon :size="25" class="icon">
                <VideoCameraFilled />
              </el-icon>
              <p>玩转引导</p>
            </div>
            <div @click="zujiansureboxshow = true">
              <el-icon :size="25" class="icon">
                <List />
              </el-icon>

              <p>组件开关</p>
            </div>
            <div @click="login()">
              <el-icon :size="25" class="icon">
                <Stamp />
              </el-icon>
              <p>点击登录</p>
            </div>
          </div>
          <el-drawer v-model="zujiansureboxshow" title="开关组件" :with-header="300" size="350">
            <div class="zujiankonhzhibox">
              <span>阿里云</span> <el-switch v-model="zujianlist.aliyun" />|
              <span>下班倒计时</span> <el-switch v-model="zujianlist.xiaobantime" />
            </div>
            <div class="zujiankonhzhibox">
              <span>Gitee</span> <el-switch v-model="zujianlist.gitee" />|
              <span>哔哩哔哩</span> <el-switch v-model="zujianlist.bilibili" />
            </div>
            <div class="zujiankonhzhibox">
              <span>写作猫</span> <el-switch v-model="zujianlist.xiezuomao" />|
              <span>中国大学</span> <el-switch v-model="zujianlist.mooc" />
            </div>
            <div class="zujiankonhzhibox">
              <span>功德无量</span> <el-switch v-model="zujianlist.gongde" />|
              <span>腾讯云</span> <el-switch v-model="zujianlist.tengxunyun" />
            </div>
            <div class="zujiankonhzhibox">
              <span>羊了个羊</span> <el-switch v-model="zujianlist.yanglegeyang" />|
              <span>随笔</span> <el-switch v-model="zujianlist.suibi" />
            </div>
            <div class="zujiankonhzhibox">
              <span>抖音</span> <el-switch v-model="zujianlist.douying" />|
              <span>PPT神器</span> <el-switch v-model="zujianlist.pptshengqi" />
            </div>
            <div class="zujiankonhzhibox">
              <span>摸鱼日历</span> <el-switch v-model="zujianlist.moyurili" />|
              <span>摄图网</span> <el-switch v-model="zujianlist.shetuwang" />
            </div>
            <div class="zujiankonhzhibox">
              <span>果核剥壳</span> <el-switch v-model="zujianlist.guohebaoke" />|
              <span>熊猫办公</span> <el-switch v-model="zujianlist.xiongmaobangong" />
            </div>
          </el-drawer>
        </div>
        <p>玩转引导</p>
        <el-dialog v-model="yindaoboxshow" title="欢迎来到引导界面">
          <el-carousel height="150px">
            <el-carousel-item v-for="item in 4" :key="item" style="background-color: #99a9bf;">
              这里放演示图{{ item }}
            </el-carousel-item>
          </el-carousel>
        </el-dialog>

      </div>
      <div class="oneone" v-if="zujianlist.gitee || false">
        <a href="https://gitee.com/" target="_blank">
          <img src="/img/gitee.jpg" alt="gitee">
          <p>gitee</p>
        </a>
      </div>
      <div class="twotwo" v-if="zujianlist.bilibili || false">
        <div class="bilibili-box">
          <div class="bili-top-box">
            <div class="bili-sou">
              <input v-model="searchValue" class="bili-top-inp" type="search" placeholder="搜一搜～"
                @keyup.enter="handleEnterKeyFilter">
            </div>
            <div class="logo-box"><img @click="handleEnterKeyFilter" class="bili-top-logo"
                src="https://img.zhuayuya.com/icon_/bilibililogo.svg" alt="">
            </div>
          </div>

          <div class="bili-button-box">
            <a href="https://www.bilibili.com/ " target="_blank">
              <div class="bili-button-open" @click="toBlibli">OPEN</div>
            </a>
            <a href="https://www.bilibili.com/v/popular/all/" target="_blank">
              <div class="bili-button-sart" @click="toremen">
                <img src="https://img.zhuayuya.com/icon_/bilibilizuihuo.svg" alt="图">
              </div>
            </a>
            <a href="https://www.bilibili.com/" target="_blank">
              <div class="bili-button-collect" data-v-5c940bb5="">
                <img src="https://img.zhuayuya.com/icon_/bilibilishoucang.svg" alt="">
              </div>
            </a>
          </div>

          <div class="bili-centre-box">
            <iframe class="bili-centre-if" style="width: 150px; height: 85px;margin: 4px;border-radius: 20px;border: 0;"
              src="//player.bilibili.com/player.html?aid=900054017&amp;bvid=BV1YP4y1f7Mw&amp;cid=819397981&amp;page=1&amp;danmaku=0"></iframe>
          </div>
        </div>
        <p>哔哩哔哩</p>
      </div>
      <div class="oneone" v-if="zujianlist.xiezuomao || false">
        <a href="https://xiezuocat.com/" target="_blank">
          <img src="/img/xiezuomao.jpg" alt="写作猫">
          <p>写作猫</p>
        </a>
      </div>
      <div class="oneone" v-if="zujianlist.mooc || false">
        <a href="https://www.icourse163.org/" target="_blank">
          <img src="/img/mooc.jpg" alt="中国大学">
          <p>中国大学</p>
        </a>
      </div>
      <div class="twotwo" v-if="zujianlist.gongde || false">
        <div class="gongde">
          <span class="gongdetext">
            积攒功德:{{ gongdedian }}
          </span>
          <img src="/img/muyu.png" alt="木鱼" @click="gongdeadd">
        </div>
        <p>功德无量</p>
      </div>
      <div class="oneone" v-if="zujianlist.tengxunyun || false">
        <a href="https://cloud.tencent.com/" target="_blank">
          <img src="/img/tengxunyun.png" alt="腾讯云">
          <p>腾讯云</p>
        </a>
      </div>
      <div class="oneone" v-if="zujianlist.yanglegeyang || false">
        <a href="https://y.uoxn.com" target="_blank">
          <img src="/img/yangyang.jpg" alt="羊了个羊">
          <p>羊了个羊</p>
        </a>
      </div>
      <div class="threetwo" v-if="zujianlist.suibi || false">
        <div class="suibixiaoji" @click="suibidrawer = true">
          <div class="suibileft">
            <p> 随笔</p>
            <el-icon>
              <Promotion />
            </el-icon>
          </div>
          <div class="suibiright">
            <p><span></span>随时随地记录美好</p>
            <div class="suibiinput">{{ suibilist[0].suibitext }}</div>
          </div>
          <el-drawer v-model="suibidrawer" title="随笔日记" :with-header="300" size="350">
            <el-input :autosize="{ minRows: 5, maxRows: 30 }" v-model="suibitext" type="textarea" placeholder="请输入内容"
              class="suibifabu" />
            <el-button type="primary" round @click="upsuibi">完成
              <el-icon>
                <Promotion />
              </el-icon>
            </el-button>
            <div class="suibilistbox">
              <div v-for="item in suibilist" :key="item._id" class="listflex">
                <p class="listsonbox">{{ item.suibitext }}</p><el-button v-show="item._id" type="primary" :icon="Delete"
                  circle @click="deletesuibi(item._id)" />
              </div>
            </div>
          </el-drawer>
        </div>
        <p>随笔小记</p>
      </div>
      <div class="oneone" v-if="zujianlist.douying || false">
        <a href="https://www.douyin.com/" target="_blank">
          <img src="/img/dy.png" alt="抖音">
          <p>抖音</p>
        </a>
      </div>
      <div class="oneone" v-if="zujianlist.pptshengqi || false">
        <a href="https://www.islide.cc/" target="_blank">
          <img src="/img/islide.png" alt="PPT神器">
          <p>PPT神器</p>
        </a>
      </div>
      <div class="twotwo" v-if="zujianlist.xiaobantime || false">
        <div class="xiabantime">
          <span>{{ daojishi ? daojishi : "00:00:00" }}</span>
          <div class="timesurebox">
            <div class="xuanzebox">
              <el-time-picker style="width:100%" v-model="xiabanshijian" clearable="false" id="shijian"
                placeholder="选择下班时间" />
            </div>
            <div class="btnbox" @click="timesure">
              开始
            </div>
          </div>
        </div>
        <p>下班倒计时</p>
      </div>

      <div class="twoone" v-if="zujianlist.moyurili || false">
        <div class="moyurenriji">
          <p>时间间隔最近的假期<br><b>{{ moyulist.name }}</b> : <b>{{ moyulist.rest }}天</b></p>
          <div class="moyutitbox">
            <el-button size="small" text @click="moyurilishow = true">摸鱼日历<el-icon>
                <DArrowRight />
              </el-icon></el-button>
          </div>
          <el-dialog draggable="true" v-model="moyurilishow" width="520px">
            <template #footer>
              <span class="dialog-footer">
                <img src="https://api.iwyu.com/API/moyu" alt="摸鱼日历" v-if="moyurilishow"
                  style="margin: -85px 0 -15px 0;width: 480px;">
              </span>
            </template>
          </el-dialog>
        </div>
        <p>摸鱼日历</p>
      </div>
      <div class="oneone" v-if="zujianlist.aliyun || false">
        <a href="https://www.aliyun.com/" target="_blank">
          <img src="/img/aliyun.jpg" alt="阿里云">
          <p>阿里云</p>
        </a>
      </div>
      <div class="oneone" v-if="zujianlist.shetuwang || false">
        <a href="https://699pic.com/" target="_blank">
          <img src="/img/shetu.jpg" alt="摄图网">
          <p>摄图网</p>
        </a>
      </div>
      <div class="oneone" v-if="zujianlist.xiongmaobangong || false">
        <a href="https://www.tukuppt.com/ppt/" target="_blank">
          <img src="/img/xiongmaobangong.jpg" alt="熊猫办公">
          <p>熊猫办公</p>
        </a>
      </div>
      <div class="oneone" v-if="zujianlist.guohebaoke || false">
        <a href="https://www.ghxi.com/" target="_blank">
          <img src="/img/guohe.png" alt="果核剥壳">
          <p>果核剥壳</p>
        </a>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, watch } from 'vue';
import { gotodeletesuibi, tianjiasuibi, GetSuibiList } from '../api/suibi.js'
import { ElMessage } from 'element-plus'
import { loginShowStore } from '@/stores/loginshow.js'
import { zujianShowStore } from '@/stores/zujianshowlist.js'
import { getxiaolist,xiugaixiaolist } from '../api/user.js'

import { Delete } from '@element-plus/icons-vue'

const zujianlist = ref({
  aliyun: true, xiaobantime: true, gitee: true, bilibili: true, xiezuomao: true, mooc: true, gongde: true, tengxunyun: true, yanglegeyang: true
  , suibi: true, douying: true, pptshengqi: true, moyurili: true, shetuwang: true, xiongmaobangong: true, guohebaoke: true
})
// 引导
const yindaoboxshow = ref(false)
const zujiansureboxshow = ref(false)
//状态管理
const loginbox = loginShowStore
const xiaozujianlist = zujianShowStore

const login = () => {
  loginbox.loginboxshow = !loginbox.loginboxshow
}
//搜搜内容
const searchValue = ref('')
const gotosousuo = ref('')
function handleEnterKeyFilter() {
  //回车跳转搜
  gotosousuo.value = 'https://search.bilibili.com/all?keyword=' + searchValue.value
  window.open(gotosousuo.value)
}
// 功德模块
const gongdedian = ref(0)
const gongdeadd = () => {
  gongdedian.value = gongdedian.value + 1
  localStorage.setItem('GONG-DE', gongdedian.value)
}
//随笔模块
const suibidrawer = ref(false)
const suibitext = ref('')
const suibilist = ref([{
  suibitext: '快来发表些什么吧！',
  _id: false
}])
const upsuibi = async () => {
  // 添加
  if (localStorage.getItem("user")) {
    const userID = JSON.parse(localStorage.getItem("user"))._id
    let data = await tianjiasuibi(userID, suibitext.value)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
      ElMessage('添加成功')
      suibitext.value = ''
      suibidrawer.value = false
      isgetsuibilist()
    } else {
      ElMessage({
        message: '添加失败请检查网络或稍后再试',
        type: 'success',
      })
    }
  } else {
    ElMessage({
      message: '使用此功能需要先登录，请先登录',
      type: 'success',
    })
  }
}
const deletesuibi = async (_id) => {
  // 删除随笔
  let data = await gotodeletesuibi(_id)
  const { resultCode, resultInfo } = data
  if (resultCode == 1) {
    ElMessage('删除成功')
    isgetsuibilist()
  } else {
    ElMessage({
      message: '删除失败请检查网络或稍后再试',
      type: 'success',
    })
  }
}
const isgetsuibilist = async () => {
  if (localStorage.getItem("user")) {
    // 获取随笔列表
    const userID = JSON.parse(localStorage.getItem("user"))._id
    let data = await GetSuibiList(userID)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
      suibilist.value = resultInfo
    } else {
      suibilist.value = [{
        suibitext: '快来发表些什么吧！',
        _id: false
      }]
    }
  } else {
    suibilist.value = [{
      suibitext: '快来发表些什么吧！',
      _id: false
    }]
  }
}
//下班倒计时模块
const xiabanshijian = ref()
const daojishi = ref("")
const timesure = () => {
  if (xiabanshijian.value < new Date() || xiabanshijian == null) {
    ElMessage('请选择的时间需大于当前时间')
    daojishi.value == "00:00:00"
    // return
  } else {
    // 确认时间
    var time = setInterval(() => {
      //获取当前时间的时间戳（单位毫秒）
      let inputTime = xiabanshijian.value
      var nowTime = +new Date();
      //把剩余时间毫秒数转化为秒
      var times = (inputTime - nowTime) / 1000;
      //计算小时数 转化为整数
      var h = parseInt(times / 60 / 60 % 24);
      //如果小时数小于 10，要变成 0 + 数字的形式
      let a = h < 0 ? 0 : h
      console.log(a);
      a = a < 10 ? "0" + a : a;
      //计算分钟数 转化为整数
      var m = parseInt(times / 60 % 60);
      //如果分钟数小于 10，要变成 0 + 数字的形式
      let b = m < 0 ? 0 : m
      b = b < 10 ? "0" + b : b;
      //计算描述 转化为整数
      var s = parseInt(times % 60);
      //如果秒钟数小于 10，要变成 0 + 数字的形式
      let c = s < 0 ? 0 : s
      c = c < 10 ? "0" + c : c;
      daojishi.value = a + ':' + b + ":" + c
      if (xiabanshijian.value < new Date()) {
        xiabanshijian.value == new Date()
        clearInterval(time)
        daojishi.value == "00:00:00"
        // return
      }
    }, 1000);
  }
}
//摸鱼日历
const moyurilishow = ref(false)
const moyulist = ref({ holiday: '空' })
const moyuday = async () => {
  let list = () => {
    $.ajax({
      url: "http://timor.tech/api/holiday/next/", //要请求的后端地址
      type: "GET", //数据发送的方式(POST或者GET)
      // data: {val1: "1", val2: "2"}, //需要传递的参数
      dataType: "json", //后端返回的数据格式
      success: function (result) {//ajax请求成功后触发的方法
        moyulist.value = result.holiday
      },
      error: function () {//ajax请求失败后触发的方法
        console.log('请求失败');
      }
    });
  }
  list()
}
// 是否显示组件列表
const zujianrightboxoffandno = async () => {
  if (localStorage.getItem('user')) {
    const _id = JSON.parse(localStorage.getItem("user"))._id
    let data = await getxiaolist(_id)
    const { resultCode, resultInfo } = data
    if (resultCode == 1) {
      console.log(resultInfo.zujianlist);
      zujianlist.value = resultInfo.zujianlist
    } 
  } else {
    zujianlist.value = {
      aliyun: true, xiaobantime: true, gitee: true, bilibili: true, xiezuomao: true, mooc: true, gongde: true, tengxunyun: true, yanglegeyang: true
      , suibi: true, douying: true, pptshengqi: true, moyurili: true, shetuwang: true, xiongmaobangong: true, guohebaoke: true
    }
  }
}
//加载函数
const jiazaiwan = () => {
  gongdedian.value = Number(localStorage.getItem('GONG-DE'))
}
// 监听搜索内容
// watch(zujianlist, async (newValue, oldValue) => {
// 	//搜索内容拼接

// })
onMounted(() => {
  jiazaiwan()
  isgetsuibilist()
  moyuday()
  zujianrightboxoffandno()
});

</script>
<style lang="scss" scoped>
p {
  margin: 0;
}

.xiaozujianbigbox {
  margin: 73px auto;
  width: 70vw;
  min-width: 300px;
  height: 540px;
  position: relative;
  overflow: hidden;

  .xiaozujian {
    >div>div {
      box-shadow: 2px 2px 5px 1px #5f5f5f;
    }

    >div>p {
      text-shadow: 1px 2px 3px #555;
    }

    div>a>img {
      box-shadow: 2px 2px 5px 1px #5f5f5f;
    }

    font-size: 13px;
    line-height: 20px;

    .oneone {
      grid-row: span 1;
      grid-column: span 1;
      height: 90px;
      width: 90px;

      a {
        text-decoration: none;
        height: 90px;
        color: #fff;
        cursor: pointer;

        p {
          text-shadow: 1px 2px 3px #555;
        }

        img {
          width: 70px;
          height: 70px;
          border-radius: 15px;
        }

        p {
          line-height: 13px;
        }
      }
    }

    .twotwo {
      grid-row: span 2;
      grid-column: span 2;
      height: 180px;
      width: 180px;

      .gongde {
        height: 150px;
        width: 160px;
        padding-top: 10px;
        border-radius: 20px;
        background: #101010;
        margin: 0 auto;

        .gongdetext {
          font-size: 12px;
          border-radius: 8px;
          background: #FFF0E0;
          color: #4B2903;
          padding: 3px;
        }

        img {
          cursor: url('/img/bang.cur'), default;
          margin-top: 30px;
        }
      }

      .xiabantime {
        width: 150px;
        margin: 0 auto;
        height: 150px;
        padding: 5px;
        overflow: hidden;
        background: #fff;
        border-radius: 25px;

        span {
          display: inline-block;
          width: 150px;
          height: 50px;
          background-color: #333;
          color: #fff;
          font-weight: 900;
          /* 使方块中文字居中 */
          text-align: center;
          line-height: 50px;
          font-size: 30px;
          border-radius: 15px;
          margin: 20px auto;
        }

        .timesurebox {
          // display: flex;
          position: relative;

          .xuanzebox {
            width: 150px;
          }

          .btnbox {
            position: absolute;
            right: 0;
            top: 0;
            z-index: 5;
            background: #fff;
            border: 1px solid #c9cbcf;
            color: #595959;
            line-height: 30px;
            width: 30px;
            font-size: 12px;
            cursor: pointer;
            border-radius: 0 5px 5px 0;
          }
        }
      }

      .bilibili-box {
        margin: 0 auto;
        width: 160px;
        height: 160px;
        border-radius: 20px;
        background: linear-gradient(215.69deg, #FF7DB3 8.42%, #FFABC3 93.64%);

        .bili-top-box {
          display: flex;
          padding: 5px 10px;
          justify-content: space-between;

          .bili-top-inp {
            width: 100px;
            height: 25px;
            background-color: #ffffff80;
            color: #fff;
            border: none;
            border-radius: 18px;
            padding-left: 10px;
            padding-right: 10px;
          }

          .logo-box {
            width: 35px;
            height: 25px;
            background-color: #ffffff80;
            border-radius: 18px;
            text-align: center;
            line-height: 29px;

            img {
              width: 16px;
              transition: all .2s ease-in;
            }
          }
        }

        .bili-button-box {
          display: flex;
          justify-content: space-between;
          padding: 3px 10px;
          margin: 0 auto;

          a {
            text-decoration: none;
          }

          .bili-button-open {
            width: 55px;
            height: 25px;
            border-radius: 18px;
            background-color: #fff;
            font-size: 13px;
            color: #fb7299;
            text-align: center;
            line-height: 25px;
            font-weight: 500;
          }

          .bili-button-sart {
            width: 35px;
            height: 25px;
            border-radius: 18px;
            background-color: #ffffffb3;
            text-align: center;
          }

          .bili-button-collect {
            width: 35px;
            height: 25px;
            border-radius: 18px;
            background-color: #ffffffb3;
            text-align: center;
          }

          .bili-centre-box {
            text-align: center;
          }
        }
      }
    }

    .threetwo {
      grid-column: span 3;
      grid-row: span 2;
      width: 270px;
      height: 180px;

      .suibixiaoji {
        display: flex;
        margin: 0 auto;
        height: 159px;
        width: 250px;
        border-radius: 20px;
        background: #FFF;
        border-top: 1px solid#fff;

        .suibileft {
          border-radius: 10px;
          width: 50px;
          height: 120px;
          color: #6E6E6E;
          margin-left: 10px;

          p {
            margin-top: 20px;
            font-size: 16px;
            font-weight: 700;
          }

          .el-icon {
            font-size: 35px;
            color: #fff;
            background: #00A3FF;
            padding: 5px;
            border-radius: 50%;
            margin-top: 50px;
          }

          .el-icon:hover {
            padding: 7.5px;
            font-size: 30px;
          }
        }

        .suibiright {
          text-align: left;
          margin-left: 15px;

          p {
            margin: 10px 0;
            color: #6E6E6E;

            span {
              border: 3px solid #00A3FF;
              margin: 0 5px;
              border-radius: 3px;
            }
          }

          .suibiinput {
            width: 150px;
            height: 78px;
            border: 1px solid #bbb;
            border-radius: 12px;
            color: #6E6E6E;
            overflow: hidden;
            padding: 5px;
          }
        }

        .el-drawer {

          // z-index: 9999;
          .suibifabu {
            border-radius: 12px;
            width: 300px;
            outline: none;
          }

          .el-button {
            margin: 15px 0 20px 180px;
          }

          .suibilistbox {
            text-align: left;
            // align-items: flex-end;
            color: #000;

            .listflex {
              display: flex;
              border-top: 1px dashed #6E6E6E;

              .listsonbox {
                width: 250px;
              }

              .el-button {
                margin: 10px 0;
              }
            }
          }
        }
      }

      // 引导
      .yindao {
        margin: 0 auto;
        width: 230px;
        height: 150px;
        border-radius: 20px;
        padding: 10px 10px 0 10px;
        background: linear-gradient(180deg, #E4E4E4 0%, #a0a0a0 100%);
        color: #222;

        .first-lab {
          padding: 10px;
          display: flex;
          justify-content: space-between;

          span {
            font-weight: 600;
            font-size: 24px;
          }
        }

        .zujiankonhzhibox {
          height: 30px;
          width: 300px;
          color: #000;
          display: flex;
          justify-content: space-between;
          line-height: 30px;

          span {
            width: 85px;
            text-align: left;
            overflow: hidden;
          }
        }

        .first-options {
          display: flex;
          justify-content: center;
          color: #222;

          div {
            cursor: pointer;
            padding-top: 10px;
            text-align: center;
            font-size: 14px;
            font-weight: 600;
            width: 65px;
            height: 70px;
            border-radius: 12px;
            background: rgb(246, 246, 246);
            margin: 10px 6px;

            .icon:hover {
              color: #a0a0a0;
            }
          }
        }

        .first-options-childtwo {
          width: 980px;
          height: 590px;
          background-color: rgb(119, 187, 233);
          transform: translate(-50%, -50%);
          z-index: 1000;
          border-radius: 15px;
          position: fixed;
          left: 50vw;
          top: -35vh;
        }
      }
    }

    .twoone {
      grid-column: span 2;
      grid-row: span 1;
      height: 90px;
      width: 180;

      .moyurenriji {
        width: 150px;
        margin: 0 auto;
        height: 60px;
        background: #fff;
        border-radius: 15px;
        padding: 5px;
        color: #666;
        text-align: left;

        .moyutitbox {
          text-align: right;
        }
      }
    }

    text-align: center;
    max-height: 450px;
    color: #fff;
    display: grid;
    justify-content: center;
    grid-template-columns: repeat(auto-fill, 90px);
    grid-auto-rows: 90px;
    grid-auto-flow: dense;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    right: -23px;
    bottom: 0;
    overflow-x: hidden;
    overflow-y: scroll;
    z-index: 0;
  }
}
</style>